<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位全屏遮罩</title>
<style>
        .mask {
            /*以html视口(view port) 为参照物，紧贴四个边，实现撑满全屏的效果*/
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        div {
            margin: 20px;
            padding: 20px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<div class="mask"></div>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aut beatae doloremque dolores et eveniet
        itaque
        iusto maxime modi nam nihil pariatur placeat quidem quis saepe sequi unde voluptates, voluptatibus?
    </div>
    <div>Ad consequuntur eligendi hic odio provident, tenetur. Aspernatur dicta dolores eaque eos, modi perspiciatis
        quia
        ratione? Beatae distinctio dolor, exercitationem explicabo quidem quo tempore? Asperiores ducimus ipsum
        perspiciatis
        recusandae soluta.
    </div>
    <div>Aliquam aspernatur, at autem debitis deserunt dicta dignissimos distinctio doloremque, ea eum fuga inventore
        laudantium modi nihil non numquam odit officia optio quibusdam rem. Accusamus labore nulla quae ratione sunt!
    </div>
    <div>Aliquam animi aperiam, aut cumque dicta distinctio dolor ducimus eos esse est ipsum laboriosam laudantium,
        molestias reiciendis repellat sunt vel, veritatis. Culpa deserunt dolor expedita numquam qui, quod repudiandae
        saepe?
    </div>
    <div>At, commodi dolores in odio quasi reiciendis velit voluptates? Amet animi commodi deleniti dolore eius eveniet
        illum ipsum iusto, magnam mollitia nulla numquam quibusdam quisquam sit voluptates? Blanditiis, eum, laboriosam!
    </div>
    <div>Hic iste iure nisi quia temporibus. Animi architecto corporis eaque exercitationem minus natus omnis
        repellendus
        tempora! Aut cum dolore doloremque eaque earum ex incidunt porro quod rerum, soluta, temporibus unde.
    </div>
    <div>Ab aliquid aperiam at, atque delectus dolor enim esse ex hic libero obcaecati odio perspiciatis provident qui
        quo
        totam voluptate voluptatibus voluptatum? Autem consequatur cumque dolorem, expedita molestias mollitia
        provident!
    </div>
    <div>Aperiam atque cumque earum incidunt iste itaque perferendis reiciendis rem sint voluptate? Asperiores deleniti
        fuga
        fugiat id neque perspiciatis quia reprehenderit voluptas. Cumque, quaerat, suscipit? Inventore neque officia
        optio
        recusandae.
    </div>
    <div>Adipisci asperiores aspernatur, dolores maxime molestias quasi saepe temporibus? Aut consequuntur doloribus
        molestias. Aliquid beatae blanditiis dolor, dolore doloribus ex fugit id illum ipsa maiores modi quas reiciendis
        saepe
        tempore.
    </div>
    <div>Aperiam, at doloremque error esse eveniet illum iusto, libero nihil pariatur repellendus sapiente sit tenetur,
        velit voluptas voluptate. Beatae dolorem eos excepturi iure nostrum ratione soluta? Error quod soluta
        voluptatum.
    </div>
    <div>Hic incidunt maiores odio porro quam repellendus saepe tenetur. Animi dicta eaque fugiat illo ipsum iusto
        laudantium modi officia officiis optio quasi reiciendis saepe, sapiente, tenetur totam unde vitae voluptatibus.
    </div>
    <div>Animi ducimus itaque maxime nam, rem repudiandae tempore? Consequuntur debitis dicta dignissimos distinctio
        dolor
        dolore, dolores ea earum enim, laboriosam magnam non nulla officiis, omnis quaerat quia ratione repellat
        voluptatibus?
    </div>
    <div>Ab ad adipisci beatae dolor, doloremque ducimus eaque esse facilis fuga fugiat harum incidunt labore laborum
        magni
        maiores officiis omnis optio placeat porro qui rem reprehenderit totam velit voluptas voluptatibus.
    </div>
    <div>Deleniti id, quae quaerat quis reiciendis reprehenderit vitae. Corporis eum laborum porro! Architecto
        consequatur
        et iure nulla suscipit temporibus veniam voluptates. Minus perspiciatis quae sapiente vero! Enim expedita modi
        nostrum.
    </div>
    <div>Ad architecto, consequatur culpa dicta eum excepturi id, illo impedit laboriosam laborum magni molestias nisi
        praesentium reiciendis rerum saepe sit tempora totam veritatis voluptatum. Debitis dolore modi officiis quaerat
        repudiandae!
    </div>
    <div>Aliquid beatae blanditiis corporis distinctio dolore doloremque ex laboriosam, laborum laudantium minus,
        molestias
        nemo, neque quam quasi repellat sed sequi tenetur unde vero voluptas? Enim possimus, tenetur! Neque nihil,
        recusandae.
    </div>
    <div>Consectetur doloremque eos et eveniet ex facere molestiae nihil perferendis porro, provident quas quasi, quidem
        quo
        temporibus, voluptatem! Animi aperiam architecto dignissimos fuga, in molestiae nisi perspiciatis quae quaerat
        reprehenderit!
    </div>
    <div>Aliquam, aliquid amet autem delectus dolor doloremque modi mollitia natus necessitatibus nulla quaerat quod
        ratione
        similique sint tempore? Amet debitis doloribus ducimus mollitia neque nobis odit reiciendis tempore veritatis
        voluptate.
    </div>
    <div>Ad, animi asperiores atque blanditiis cupiditate debitis dolore dolores, explicabo iure, sapiente temporibus
        tenetur? Architecto deleniti, dicta error harum illo in minus molestias nulla obcaecati odio quod recusandae
        repellendus sit?
    </div>
    <div>Dolores eaque hic ipsam libero officia provident quidem sit tempore totam veritatis. Asperiores dignissimos,
        ducimus est facere fugiat libero nostrum provident reprehenderit sit! Ad ipsa nihil ratione. Ducimus, harum,
        suscipit!
    </div>
    <div>Aliquid asperiores at beatae consequuntur cupiditate dignissimos dolorem doloremque eius est exercitationem
        fuga
        ipsa modi necessitatibus odio officia, perferendis qui quod suscipit unde vero. Ad autem dicta eius officia
        quos?
    </div>
    <div>Accusantium distinctio ducimus earum id, ipsam itaque molestiae nam perferendis placeat provident ratione sed
        vel
        vitae. Ad assumenda aut cupiditate, facere, laborum, minus nobis provident quae rerum saepe sint tempora?
    </div>
    <div>Aut consequatur distinctio eaque esse porro quia rerum! Adipisci aspernatur autem delectus ducimus esse eum
        explicabo hic ipsa ipsam laborum necessitatibus officiis provident quis quo reiciendis rem, similique tempore
        voluptate!
    </div>
    <div>Amet cupiditate dignissimos error esse illum laboriosam nulla perferendis perspiciatis sint voluptatem. Aliquam
        aliquid, amet animi asperiores, dignissimos ex harum iusto molestiae nisi non odit rem repellat tempore veniam
        voluptatem.
    </div>
    <div>Cum cupiditate error incidunt modi, quaerat quo rerum ullam vitae voluptate? Accusamus dicta eius error ex,
        fugit
        illo labore natus odio, quibusdam rem, saepe similique sunt veritatis vero voluptas voluptates.
    </div>
    <div>Accusantium adipisci cum cumque cupiditate eaque eius error est facilis impedit inventore itaque iure, laborum
        nam,
        natus neque nesciunt nobis numquam odio omnis quae quo rem saepe sit ullam unde.
    </div>
    <div>Ad aliquam blanditiis commodi dolores doloribus ea eaque excepturi illum minus, nihil, obcaecati quaerat qui
        quis
        repellat reprehenderit sequi sint ullam, unde vel voluptas! Distinctio iure maxime porro repellendus velit.
    </div>
    <div>Accusantium doloremque excepturi facilis in iure laboriosam provident. Alias aspernatur, blanditiis deleniti
        dolorem eius illum, ipsum magnam minus molestiae molestias natus pariatur perferendis possimus reprehenderit
        tempora
        unde vitae! Doloribus, voluptatum.
    </div>
    <div>Aliquam beatae dolores eligendi ex fugit placeat quam vel veniam! Accusamus amet architecto beatae blanditiis
        culpa
        dignissimos, fugiat hic maiores placeat possimus qui quo recusandae tempora unde ut veritatis voluptatem!
    </div>
    <div>Commodi dolor dolorem explicabo facilis illo labore maiores nostrum obcaecati officiis porro quaerat, quo
        repellat
        repudiandae sed voluptas. Accusamus accusantium atque dignissimos dolorem officiis pariatur provident sed? Enim
        ex,
        iste!
    </div>
    <div>Amet assumenda at atque aut consequatur cupiditate excepturi explicabo facilis harum id illo impedit libero
        modi
        natus pariatur perspiciatis quas quo, quos tempore vitae! Aliquid exercitationem incidunt inventore
        necessitatibus
        odit?
    </div>
    <div>Accusantium aliquam asperiores assumenda commodi consequuntur cum distinctio enim error et, harum inventore
        iure
        libero magnam nostrum odio officia perferendis perspiciatis quod repellendus rerum sunt, totam ullam veniam
        voluptas
        voluptatibus!
    </div>
    <div>Culpa cum dicta doloribus error esse eveniet ex fugiat libero, magnam minus nisi numquam odit quam repellat
        saepe
        sapiente vero! Dicta esse eum, hic inventore magni pariatur tenetur vel! Dignissimos!
    </div>
    <div>Alias consectetur dicta distinctio, dolorem eos ex explicabo facilis fugiat harum magnam, maxime nam natus,
        nulla
        obcaecati omnis quidem quos reprehenderit sunt tenetur totam! A asperiores ipsam perferendis quas tenetur.
    </div>
    <div>Eaque eveniet incidunt ipsam omnis quibusdam saepe sunt tempora totam. Accusantium amet cupiditate, dignissimos
        odio odit optio repudiandae sequi tempore! Aliquam aperiam facilis fugit iste libero minus odio repudiandae
        saepe?
    </div>
    <div>Excepturi illo nihil possimus provident soluta. Atque dicta doloribus eius expedita mollitia nobis officiis
        quas
        rerum, sint. Accusamus autem esse facere hic, nisi odio possimus qui quidem reprehenderit saepe sed.
    </div>
    <div>Ab adipisci aliquam asperiores aspernatur cumque, dicta distinctio dolore, ducimus eaque eum eveniet explicabo
        iusto maiores non odit optio pariatur provident quas quod recusandae saepe ullam velit vero, voluptas voluptate!
    </div>
    <div>Aliquid aperiam commodi cumque delectus, ducimus eos laborum odit pariatur, possimus quaerat quisquam ut.
        Deserunt,
        dolor eaque facilis id inventore itaque laudantium mollitia, perferendis quis ratione, sunt tempora ullam ut.
    </div>
    <div>Asperiores blanditiis eum eveniet expedita explicabo facere hic id ipsam, modi odit omnis, possimus recusandae
        tempora totam voluptates. Accusamus aperiam architecto commodi debitis eos non, saepe sequi? Accusamus, ad
        rerum.
    </div>
    <div>Error excepturi hic nostrum. Consectetur dolorem facilis fuga magnam, natus praesentium quidem tenetur.
        Accusamus
        animi at consequuntur, ea eaque laudantium modi molestiae odit quod reiciendis repellat repudiandae rerum sit
        tenetur?
    </div>
    <div>Amet animi consequatur cum deleniti deserunt dignissimos distinctio dolores eligendi est facilis illo incidunt
        ipsam labore laborum maiores molestias, mollitia neque nesciunt nobis optio pariatur praesentium ratione
        repudiandae
        totam veniam?
    </div>
    <div>Eveniet sed, vel. A assumenda cum deserunt, esse ex expedita facere nulla numquam placeat, possimus quae
        repellat,
        reprehenderit sint suscipit tempora? Accusantium assumenda deserunt dignissimos nobis provident? Consequatur,
        mollitia
        quidem.
    </div>
    <div>Accusantium debitis earum incidunt labore nemo nobis nulla porro possimus rerum saepe, velit, voluptatum? Ad,
        architecto cum deserunt eligendi illum iste libero minus molestias, nemo nihil placeat sapiente unde vitae.
    </div>
    <div>Accusantium assumenda dolorem dolorum facere, iusto maxime molestias obcaecati placeat quia quisquam recusandae
        reiciendis rerum velit! Assumenda, autem doloremque excepturi facilis illum ipsum maiores non quam recusandae
        repellat
        sint tenetur.
    </div>
    <div>Ad dolores laborum modi molestias odit perspiciatis vitae. A adipisci, aliquid architecto asperiores autem,
        consequuntur earum enim esse ex libero maiores mollitia, possimus quibusdam quisquam ratione repudiandae rerum
        totam
        veritatis?
    </div>
    <div>A atque blanditiis corporis, illum impedit ipsum laborum quasi quod ratione rerum sequi sint voluptas
        voluptatem.
        Ducimus, soluta, tempora. Adipisci asperiores atque beatae, non provident quam quibusdam recusandae vero
        voluptatem!
    </div>
    <div>Alias aliquid dolorum ea earum enim est eum excepturi harum, iste iure, maiores molestias non odio perspiciatis
        possimus rem sequi temporibus ullam! Consectetur dolorem exercitationem expedita illo non, quidem voluptas.
    </div>
    <div>Accusantium consequatur culpa dolor in iure libero, nostrum porro quibusdam, quisquam saepe sit ullam! Aut
        consequatur dignissimos eveniet fuga libero mollitia, necessitatibus nobis quaerat quam quis ratione sequi,
        tempore
        veritatis?
    </div>
    <div>Accusantium asperiores autem cum cumque cupiditate earum est ipsam laudantium, mollitia nesciunt, nisi nostrum
        nulla numquam perferendis perspiciatis quia quis saepe veritatis. Autem eos itaque laudantium modi quisquam
        reprehenderit suscipit.
    </div>
    <div>At autem commodi dolorem eveniet id, magni maiores, nemo porro possimus saepe sit voluptates! A aliquam aliquid
        aut, excepturi temporibus unde. Beatae cumque deleniti eius iste molestias natus sed tempore.
    </div>
    <div>Asperiores commodi corporis cupiditate delectus dolor dolorum eligendi est expedita impedit ipsum iure,
        laboriosam
        nam nesciunt nihil nobis odio optio quaerat quas quasi quibusdam sequi sit tenetur velit, voluptate voluptatem?
    </div>
    <div>Accusantium aperiam cum delectus facere id laborum nobis perferendis rerum saepe tempora. Atque, cum cupiditate
        ducimus eligendi eveniet fugiat illo minus nihil repellat repellendus repudiandae rerum tempora, ullam vel
        voluptas?
    </div>
    <div>Dicta esse itaque libero sequi. Accusantium dignissimos dolorum in inventore iusto quam quod repellat unde
        voluptates. A aspernatur, aut cupiditate eaque esse explicabo id molestiae, nobis non officia perferendis, sunt?
    </div>
    <div>A amet corporis cumque cupiditate debitis delectus doloremque dolores eaque earum exercitationem explicabo
        fugit
        id, magnam modi molestiae nam nisi omnis perferendis quaerat, quisquam reiciendis repellendus sequi sint
        veritatis
        voluptates.
    </div>
    <div>Accusamus alias at cum cupiditate dicta dignissimos ex fugit, ipsam molestias, nesciunt nisi non placeat quia
        rem
        sunt? Cumque deleniti dolores enim ipsa ipsum libero neque, officiis qui quos velit.
    </div>
    <div>A aspernatur beatae commodi cum cumque debitis deleniti dolore esse hic id minus mollitia natus nemo nesciunt
        nobis
        obcaecati, officiis perspiciatis quidem quis saepe sapiente sequi, tempore totam vel voluptas.
    </div>
    <div>Accusamus animi, aperiam beatae consectetur deserunt dicta dolorem dolores ducimus esse excepturi fugit ipsam
        iste
        iure laborum maiores nemo praesentium, quaerat quam quia quo reiciendis repudiandae saepe sit tempora ullam!
    </div>
    <div>Amet consequuntur maiores natus nihil placeat veniam? Consequatur consequuntur dignissimos eius eligendi est
        fugit,
        harum labore, maxime nesciunt omnis, perferendis quidem voluptates! Ab at, atque distinctio eveniet nemo odio
        perspiciatis.
    </div>
    <div>Architecto corporis dolorum excepturi facere illum molestiae obcaecati, optio quibusdam repellendus sunt
        veritatis
        voluptate. Aut, odit, soluta? Architecto, ex, explicabo fugiat iure libero magni nesciunt, non omnis repellat
        sapiente
        sed!
    </div>
    <div>Enim et incidunt mollitia nulla possimus sint soluta. Ab ad adipisci aut cupiditate delectus ex fugit, in
        inventore
        iure minus molestiae, mollitia possimus, provident ratione sapiente similique sit. Minima, vero!
    </div>
</div>

</body>
</html>